<template>
<div class="contenBox">
    <!-- 左侧导航 -->
    <div class="leftTree">
      <!-- <Tree :data="treeData" @getLeftTree="getLeftTree"></Tree> -->
      <el-tree :data="treeData" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>

    <!-- 右侧内容 -->
    <div class="rightContent">
      <div class="rightTop">
        <div class="rightTitle">
          <p>管理列表</p>
        </div>
        <div class="rightSearch">
          <div class="rightSearchInput">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              @input="changeSearch"
            ></el-input>
          </div>

          <el-button type="primary" class="addCollege" icon="el-icon-plus" @click="addCollege">
            添加学院
          </el-button>

          <el-button type="danger" @click="moreDelete" icon="el-icon-close">
            批量删除
          </el-button>
        </div>
      </div>

      <div class="rightBottom">
        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="selectionChange"
          row-key="colleageId"
          style="width: 100%"
        >
          <el-table-column type="selection" width="50" :reserve-selection="true"> </el-table-column>
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="colleageName" label="学院名称"> </el-table-column>
          <el-table-column prop="parentColleageName" label="上级学院">
            <template slot-scope="scope">
              {{ scope.row.parentColleageName ? scope.row.parentColleageName : "无" }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <!-- <img
                  class="edit"
                  @click="handleEdit(scope.row)"
                  src="../../assets/edit.png"
                  alt=""
                /> -->
                <span class="bianji" @click="handleEdit(scope.row)">编辑</span>
                <span class="shanchu" @click="handleDelete(scope.row)">删除</span>
                <!-- <img
                  class="del"
                  @click="handleDelete(scope.row)"
                  src="../../assets/del.png"
                  alt=""
                /> -->
              </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" v-show="tableData.length">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            prev-text="上一页"
            next-text="下一页"
            :page-size="10"
            layout="prev, pager, next, jumper"
            ref="pagination"
            :total="total"
          >
          </el-pagination>
          <el-button class="sure" type="primary">确定</el-button>
        </div>
      </div>
    </div>

    <div class="dialog">
     <!-- 添加弹框 -->
      <el-dialog
        :title="isDialogTitle ? '添加学院' : '修改学院'"
        :visible.sync="dialogFormVisible"
        width="700"
        height="400"
      >
        <div class="addInput">
          <p class="collegeName">学院名称：</p>
          <el-input
            v-model="addInputValue"
            placeholder="请输入学院名称"
          ></el-input>
        </div>
        <div class="addSelect">
          <p class="superiorCollege">上级学院：</p>
          <!-- <p v-show="isDialogTitle === false" class="paraentCollege">{{this.infoUpResName ? this.infoUpResName : '无'}}</p> -->
          <el-select
                  v-model="saveForm.upResIds"
                  clearable
                  placeholder="请选择"
                  @clear="infoHandleClear"
                  :disabled="infoUpResName == '无' ? true :false"
                  ref="infoSelectUpResId"
                >
                  <!-- // 设置一个隐藏的下拉选项
              // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
                  <el-option hidden :value="saveForm.upResIds" :label="infoUpResName">
                  </el-option>
                  <!-- // 设置树形组件
                是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
                // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
                  // 节点被点击时的回调 -->
                  <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                    @node-click="infoHandleNodeClick"
                  >
                  </el-tree>
                </el-select>
          <!-- <el-tree :data="treeData" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->

          <!-- <el-select v-model="addSelectValue" placeholder="请选择上级学院">
            <el-option
              v-for="item in options"
              :key="item.colleageId"
              :label="item.colleageName"
              :value="item.colleageId"
            >
            </el-option>
          </el-select> -->
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel" @click="cancel"
            >取 消</el-button
          >
          <el-button class="determine" type="primary" @click="addBtn"
            >确 定</el-button
          >
        </div>
        <transition name="fade">
          <p class="message" v-if="isShowMsg">信息不能为空</p>
        </transition>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { _debounce } from "@/utils/debounce";
import {
  colleageTreeDataApi ,
  getTableApi,
  colleageAddApi,
  getParnentCollege,
  editColleage,
  deleteColleage
} from "@/api/basics/college.js"
export default {
  name: "college",
  data() {
    return {
      // 左侧树模拟数据
      treeData: [],
      // 模糊搜索
      input: "",
      // table 模拟数据
      tableData: [],
      // 显示当前第几页
      currentPage3: 1,
      // 上级学院 数据
      options: [],
      // select选中数据
      addSelectValue: "",
      // 弹框开关
      dialogFormVisible: false,
      // 添加input
      addInputValue: "",
      selectId: "",
      // 提示信息开关
      isShowMsg: false,
      // 弹框title
      isDialogTitle: false,
      // 批量删除拼接后的 id
      ids:'',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      upResName: "", // 院校下拉框
      infoUpResName: "",//  弹框中院校下拉框
      saveForm:{
        upResIds:''
      },
      total:0,
      selectArr:[],
      isEdit:false
    };
  },
  created() {
  },

  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";
    this.getLeftTree()
    getParnentCollege().then((res)=>{
      this.options = res.data
    })
    this.upDateTree()

  },
  computed: {

  },

  methods: {
    infoHandleClear() {},
    // 弹框下拉树
    infoHandleNodeClick(data) {
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.infoUpResName = data.label;
      this.saveForm.upResIds = data.id;
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.infoSelectUpResId.blur();
      // this.editSelectValueHandler(data.id)
      // this.editMajorValue = ''

    },
    cancel() {
      this.dialogFormVisible = false
      this.infoUpResName = ''
      this.addInputValue = ''
    },
    handleNodeClick(data) {
      console.log(data);
    },
    upDateTree() {
      colleageTreeDataApi().then((res) => {
        this.treeData = res.data
      })
      .catch(() => {
      })
    },

    // 搜索
    changeSearch() {
      this.getTableListApi(this.input)
    },
    // 表格选中事件
    selectionChange(val){
      var arrTostring = []
      val.forEach(item => {
        if(arrTostring.indexOf(item.id) === -1){
          arrTostring.push(item.colleageId)
        }
      });
      this.ids = arrTostring.toString()
      this.selectArr = val

    },
    // 左侧树和table联动
    getLeftTree() {
      // 请求table数据
      this.getTableListApi()
    },
    // 批量删除
    moreDelete() {
      this.$confirm("确认删除记录吗?", "提示", {
          type: "warning",
        }).then(() => {
          deleteColleage({ids:this.ids}).then((res) =>{
            if(res.code === 500) {
              this.$message({
                type: 'error',
                message: '删除失败，请检查是否有选择学院',
              });
            }else {
              this.getTableListApi()
              this.$message({
                type: 'success',
                message: '删除成功',
              });
            }
          })
        }).catch(() => {

        });
    },
    // 添加学院
    addCollege() {
      this.isDialogTitle = true
      this.dialogFormVisible = true;
      this.addInputValue = "";
      this.infoUpResName = "";
      this.saveForm.upResIds = "";
      this.isEdit = true
      this.upDateTree()
      getParnentCollege().then((res)=>{
        this.options = res.data
      })
    },
    // 封装请求table方法
    getTableListApi(data) {
      getTableApi({colleageName:data,pageSize:10,pageNum:this.currentPage3}).then((res) =>{
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    // table  事件
    handleEdit(row) {
      this.dialogFormVisible = true;
      console.log(row);
      this.saveForm.upResIds = row.colleageId
      this.isEdit = false
      // if(row.parentColleageName !== '' ){
      //   this.isDialogTitle = true;
      // }else {
      //   this.isDialogTitle = false;
      // }
      console.log(row);
      this.colleageId = row.colleageId;
      this.infoUpResName = row.parentColleageName ? row.parentColleageName : '无';
      this.addInputValue = row.colleageName;
      // this.saveForm.upResIds = ''
      console.log(row,'----');
      getParnentCollege().then((res)=>{
        this.options = res.data
      })
    },
    handleDelete(row) {
        if(row.childrenSize == 1) {
          this.$confirm("确认删除记录吗?", "提示", {
            type: "warning",
          }).then(() => {
            deleteColleage({ids:row.colleageId}).then((res) =>{
              if(res.code === 200) {
                this.getTableListApi()
                this.upDateTree()
                this.$message({
                  type: 'success',
                  message: '删除成功',
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '删除失败',
                });
              }
            })
          }).catch(() => {

          });
        }else {
          this.$confirm("该学院下还有其他学院是否要删除?", "提示", {
            type: "warning",
          }).then(() => {
            deleteColleage({ids:row.colleageId}).then((res) =>{
              if(res.code === 200) {
                this.getTableListApi()
                this.upDateTree()
                this.$message({
                  type: 'success',
                  message: '删除成功',
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '删除失败',
                });
              }
            })
          }).catch(() => {

          });
        }

    },
    // 分页  事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getTableListApi()
    },
    // 添加学院确定 事件
    addBtn: _debounce(function () {
      console.log(this.isDialogTitle);
      if (this.isEdit) {
        if(this.addInputValue) {
          this.dialogFormVisible = false;
          let obj = {
            colleageName:this.addInputValue,
            parentId:this.saveForm.upResIds
          }
          colleageAddApi(obj).then((res)=> {
            console.log(res);
            this.getTableListApi()
            this.upDateTree()
            this.$message({
              type: 'success',
              message: '添加成功',
            });
          })

        }else if(this.infoUpResName){
           this.$message({
              type: 'info',
              message: '请输入内容',
            });
        }else if(this.addInputValue) {
          this.$message({
              type: 'info',
              message: '请选择学院',
            });
        }else{
           this.$message({
              type: 'info',
              message: '内容不能为空',
            });
        }

      } else {
        if(this.addInputValue !== ''){
          let data = {
            colleageId:this.saveForm.upResIds,
            colleageName:this.addInputValue
          }
          editColleage(data).then((res)=>{
            console.log(res);
            this.dialogFormVisible = false;
            this.getTableListApi()
            this.upDateTree()
            this.$message({
              type: 'success',
              message: '修改成功',
            });
          })
        }else if(this.infoUpResName){
           this.$message({
              type: 'info',
              message: '请输入内容',
            });
        }else if(this.addInputValue){
            this.$message({
              type: 'info',
              message: '请选择学院',
            });
        }else {
          this.$message({
              type: 'info',
              message: '内容不能为空',
            });
        }
      }
    }, 100),
  },
};
</script>

<style lang="scss" scoped>
.contenBox {
    // min-width: calc(100vh - 200px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding:0 20px 20px 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    // height: 100%;
    // overflow-y: auto;
      // min-height:calc(100vh - 95px);
    background-color: #fff;
    // padding: 15px 15px;
    border-radius: 5px;
    box-sizing: border-box;

    // .tac{
    //   width: 300px;

    //   ::v-deep .el-col-12{
    //     min-height:calc(100vh - 220px);
    //     height: 500px;
    //     overflow-y: auto;
    ::v-deep .el-tree{
      width: 250px;
    }
    ::v-deep .el-tree > .el-tree-node .el-tree-node__content{
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon{
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label{
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded{
        transform: rotate(0deg);

      }

      .el-icon-caret-right:before{
          content: "\e6df";
        }
    }

    ::v-deep.el-menu {
      border: none;
    }

    // ::v-deep .el-submenu.is-active .el-submenu__title {
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu .el-menu-item {
    //   height: 40px;
    //   line-height: 40px;
    // }

    // ::v-deep .el-menu-item.is-active {
    //   border-right: solid 2px #409eff;
    // }

    // ::v-deep .el-submenu__icon-arrow {
    //   transform: rotateZ(-90deg);
    //   font-size: 16px;
    // }

    // ::v-deep .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    //   transform: rotateZ(0deg);
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu.is-opened .el-submenu__title {
    //   color: #409eff;
    // }
  }

  .rightContent {
    flex: 1;
    min-width: calc(100vh - 250px);
    // width: 100%;
    margin-left: 15px;
    padding-right: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;

    .rightTop {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px 0;
      box-sizing: border-box;

      .rightTitle {
        width: 200px;
        color: #65a6e0;
        font-size: 20px;
        font-weight: bold;
        // p{
        //   width: 300px;
        // }
      }

      .rightSearch {
        display: flex;
        width: 400px;
        button{
          border: none;
          font-weight: 600;
        }
        .addCollege{
          background-color: rgb(88, 162, 209);
          .el-icon-plus{
            font-weight: 600 !important;
          }
        }

        .rightSearchInput {
          height: 34px;
          display: flex;
          align-items: center;
          color: #d4d4d4;
          border: solid 1px #d4d4d4;
          margin-right: 15px;
          padding-right: 8px;
          border-radius: 5px;
          line-height: 32px;


          ::v-deep .el-input__inner {
            height: 32px;
            border: none !important;
          }

          ::v-deep .el-input__icon {
            font-size: 18px;
            line-height: 34px;
          }

          ::v-deep .el-icon-search {
            font-size: 18px;
            line-height: 34px;
          }
        }

        ::v-deep .el-button {
          padding: 0 10px;
          height: 34px;
          line-height: 34px;
        }

        ::v-deep.el-icon-plus,
        ::v-deep.el-icon-close {
          font-size: 16px;
        }
      }
    }

    .rightBottom {
      margin-top: 20px;
      box-sizing: border-box;
      // height: 400px;
      // overflow-y: auto;

      .bianji {
         cursor:pointer;
          margin-right: 10px;
          // font-weight: bold;
        color: #1990FF;
      }
      .shanchu{
         cursor:pointer;
        color: #1990FF;
          // font-weight: bold;
      }

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;
        }


        ::v-deep .btn-prev,
        ::v-deep .btn-next,
        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }
    }
  }

  .dialog {
    ::v-deep .el-dialog {
      max-width: 750px;
      min-height: 426px;
      border-radius: 10px;
      background-color: #f9f9f9;
    }


    ::v-deep .el-dialog__header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #4895db;
      padding: 0;
      border-radius: 10px 10px 0 0;

      span {
        font-size: 16px;
        color: #fff;
      }
    }

    ::v-deep.el-dialog__headerbtn {
      top: 15px;
    }

    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }

    ::v-deep .el-dialog--center .el-dialog__body {
      text-align: initial;
      padding: 100px 120px;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-form-item__content {
      width: 300px;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 20px 50px;
    }

    ::v-deep .el-button--default {
      width: 130px;
      border-radius: 20px;
      background-color: #f0f0f0;
      color: #aaaaaa;
      border: none;
    }

    ::v-deep .el-button + .el-button {
      width: 130px;
      border-radius: 20px;
      margin-left: 50px;
      background-color: #4895db;
      border-color: #4895db;
    }
  }
}

::v-deep .el-dialog {
    border-radius: 10px;
    width: 700px;
    height: 400px;
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.3s;
      }
      .message {
        position: absolute;
        left: 40%;
        top: 50%;
        width: 140px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.4);
      }
      .fade-enter,
            .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
      }
      .el-dialog__header {
        border-radius: 10px 10px 0 0;
        text-align: center;
        background-color: rgb(72, 149, 219);
        .el-dialog__title {
          color: #fff;
        }
        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
        }
      }

      .el-dialog__body {
        height: 200px;
        padding-bottom: 20px;
        margin-top: 30px;
        .addInput {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          .collegeName {
            width: 70px;
          }
          .el-input {
            width: 300px;
          }
        }
        .addSelect {
          display: flex;
          justify-content: center;
          align-items: center;
          .superiorCollege {
            width: 70px;
          }
          .el-tree{
            width: 300px;
          }
          .el-select {
            width: 300px;
            .el-select__caret{
              line-height: 10px;
            }
          }
          .paraentCollege{
            width: 300px;
          }
        }
      }
      .el-dialog__footer {
        text-align: center;
        button {
          width: 100px;
          height: 35px;
          border-radius: 16px;
          line-height: 0;
        }
        .cancel {
          border: none;
          color: #848383;
          background-color: #f0f0f0;
        }
        .determine {
          border: none;
          background-color: #4995dc;
        }
      }
}
</style>